Ext.define('SistIntegral.QRIndicador.Widget',{

forward : true,

Formulario : function(btn){

var StoreIndE = Ext.create('Ext.data.Store', {
    model: 'RiesgoEstadoQuejaReclamo',
    proxy: {
        type: 'ajax',
        url: btn.Indicador+'/IndexById/'+(btn.Seleccion ? btn.Seleccion.get('Id'):null),
    reader: {type: 'json',root: 'grid'}}
});

StoreIndE.on('load', function (store, records) {
    Id = records[0].get('Id');
    Ext.getCmp('FrmIndQR').loadRecord(records[0]);

    var StoreIndE = Ext.create('Ext.data.Store', {
    model: 'Indicador',
    proxy: {
        type: 'ajax',
        url: 'indicador/IndexById/'+records[0].get('IdIndicador'),
        extraParams:{TipoIndicador:btn.Tipo},
    reader: {type: 'json',root: 'grid'}}
    });

    StoreIndE.on('load', function (store,records) {
        if(records[0]){
            StoreNivelInv.loadRecords(records);
            Ext.getCmp('CmbNivInv').setValue(records[0].get('Id'));
        }
    });
    StoreIndE.load();

});

var StoreNivelInv= Ext.create('Ext.data.Store', {
    model: 'Indicador',
    pageSize:15,
    proxy: {
        type: 'ajax',
        url: 'indicador/index',
        extraParams:{TipoIndicador:(btn.Tipo)},
    reader: {type: 'json',root: 'grid'}}
});

var CmbNivInv = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Nivel Involucramiento',
    allowBlank:false,
    name:'Id'+btn.Titulo+'QR',
    store: StoreNivelInv,
    enableKeyEvents:true,
    minChars : 0,
    id:'CmbNivInv',
    displayField: 'NomIndicador',
    forceSelection : true,
    queryMode: 'remote',
    triggerAction: 'all',
    valueField  : 'Id',
    emptyText : 'Seleccione '+btn.Titulo,
    listConfig: {
        loadingText: 'Buscando...',
        emptyText: 'Sin Resultados',
        getInnerTpl: function() {
            return '<a>' +
                '<h3 style= "background:'+'#{Color}'+'" ><span  >{NomIndicador}'+'</span></h3>' +
            '</a>';
        }
    },
    pageSize: 15
});

var Frm =  Ext.create('Ext.form.Panel', {
    id:'FrmIndQR',
    frame:true,
    bodyPadding:'5',
    fieldDefaults: {
        msgTarget: 'side',
        labelAlign: 'left',
        labelWidth: 120,
        anchor: '100%'
    },
    items: [CmbNivInv,{
        xtype: 'datefield',
        name: 'Fecha',
        allowBlank:false,
        fieldLabel: 'Fecha'
    },
    {
        xtype: 'hiddenfield',
        name: 'IdQuejaReclamo',
        value:btn.IdQR
    }
],
    buttons: [{
        text: 'Guardar',
        handler: function(){
            var form = this.up('form').getForm();
            if (form.isValid()) {
            form.submit({
                url: btn.hrefTarget+(btn.Seleccion ? btn.Seleccion.get('Id'):''),
                success: function(form, action) {

                    Ext.getCmp(btn.Indicador+" "+btn.IdQR).getStore().load();
                    Ext.getCmp('WIndQR').close();

                    Ext.MessageBox.show({
                           msg: 'Registro Creado Correctamente...',
                           progressText: 'Actualizando...',
                           width:300,
                           icon:'ext-mb-download'
                       });
                        setTimeout(function(){ Ext.MessageBox.hide();}, 1000); 
                },
                failure: function(form, action) {
                    //...
                }
            });
            }
        }
    },{
        text: 'Limpiar',
        handler: function(){
            this.up('form').getForm().reset();
        }
    }]
});
    if(btn.Seleccion){StoreIndE.load();}
    return Frm;
},

Window : function(btn){
    var Seleccion;
    if(btn.itemId == 'edit'){
        Seleccion = Ext.getCmp(btn.Indicador+" "+btn.IdQR).getSelectionModel().getSelection()[0];
        if(!Seleccion ){
        Ext.Msg.show({
            title: 'Advertencia',
            msg: 'Seleccione Registro a Editar',
            icon: Ext.MessageBox.WARNING,
            buttons: Ext.Msg.OK
        });
        return false;
        }
        else{
            if(Seleccion.get('Vigente') == "false"){
                Ext.Msg.show({
                title: 'Advertencia',
                msg: 'Registro No Disponible Para Editar</br>Puede',
                icon: Ext.MessageBox.WARNING,
                buttons: Ext.Msg.OK
                });
                return false;
            }
            btn.Seleccion = Seleccion;
        }
    }

    var Item = this.Formulario(btn);

    var win = Ext.create('widget.window', {
    id:'WIndQR',
    title: btn.getText()+" "+btn.Titulo,
    closable: true,
    bodyPadding:'5',
    bodyBorder:false,
    width: 450,
    minWidth: 200,
    height: 150,
    layout:'fit',
    modal: true,
    items: [Item]
    });

    return win.show();
},

Panel      :   function(btn){

function colorIndicador(val,meta,record) {
if(val!=null)
    //return '<div  style="background-color:#'+val+';"><h1 style="padding: 2px 3px; margin: 0; font-size: 16px;">'+record.get('Indicador')+'</h1></div>'; // arreglado
    return '<div style="background-color:#' + val + '; padding:0; margin: 0;text-align: center;"><span style="padding: 2px 3px; margin: 0; font-size: 12px; font-weight: bold; font-family: Arial, Tahoma, Verdana; display: block;">'  + record.get('Indicador') + '</span></div>';

    else return '';
}

var IdQR = btn.IdQR,Indicador=btn.Indicador,Titulo=btn.Titulo;Tipo=btn.Tipo;

var StoreIndicadorQR= Ext.create('Ext.data.Store', {
    model: 'RiesgoEstadoQuejaReclamo',
    proxy: {
        type: 'ajax',
        url: btn.Indicador+'/IndexByIdQR/'+btn.IdQR,
    reader: {type: 'json',root: 'grid'}}
});

if(Ext.getCmp(btn.Indicador+" "+btn.IdQR)){Ext.getCmp(btn.Indicador+" "+btn.IdQR).destroy();}

var grid = Ext.create('Ext.grid.Panel', {
    border:false,
    store: StoreIndicadorQR,
    id:btn.Indicador+" "+btn.IdQR,
    tbar: [
    {width: 150,emptyText:'Fecha',xtype: 'searchfield',store: StoreIndicadorQR},'->',
    {itemId:'create',text: 'Agregar',iconCls: 'agregar',hrefTarget:btn.Indicador+'/create',
    handler: function(btn) {
        btn.IdQR = IdQR;btn.Indicador = Indicador;btn.Titulo = Titulo;btn.Tipo=Tipo;
        new SistIntegral.QRIndicador.Widget().Window(btn);}
    }
    , '-',{
        itemId:'edit',text: 'Editar',iconCls: 'editar',
        hrefTarget:btn.Indicador+'/edit/',
        handler: function(btn) {
            btn.IdQR = IdQR;btn.Indicador = Indicador;btn.Titulo = Titulo;btn.Tipo=Tipo;
            new SistIntegral.QRIndicador.Widget().Window(btn);}
    },'-',
    {
        itemId: 'eliminar',text: 'Eliminar',iconCls: 'eliminar',
        handler: function() {
        },
        disabled: true
    }],
    columnLines:true,
    columns: [{xtype: 'rownumberer',width: 35},
    {header: 'Indicador',dataIndex: 'Color',flex: 1,renderer:colorIndicador}, 
    {header: 'Fecha',dataIndex: 'Fecha',width: 80}
    ],
    layout:'fit',
    region:'center',
    title: 'LISTADO '+btn.Titulo.toUpperCase()+"S",
    bbar: Ext.create('Ext.PagingToolbar', {
        store: StoreIndicadorQR,
        displayInfo: true,
        displayMsg: Titulo+' {0} - {1} de {2}',
        emptyMsg: "No Registra "+Titulo
    })
});

var ancho = Ext.getCmp('PnlSubQR'+IdQR).getWidth()/2;

var grafica =  Ext.create('Ext.chart.Chart',{
            xtype: 'chart',
            layout: 'fit',
            animate: true,
            store: StoreIndicadorQR,
            insetPadding: 30,
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['Escala'],
                title: "Escala",
                grid: true,
                label: {
                    font: '10px Arial'
                }
            }, {
                type: 'Category',
                minimum: 0,
                position: 'bottom',
                fields: ['Fecha'],
                title: "Fechas",
                label: {
                    font: '11px Arial'
//                    renderer: function(name) {
//                        return name.substr(0, 3) + ' 07';
//                    }
                }
            }],
            series: [{
                type: 'line',
                axis: 'left',
                //smooth: true,
                xField: ['Fecha'],
                yField: ['Escala'],
                fill:true,
                tips: {
                    trackMouse: true,
                    width: 80,
                    height: 40,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('Fecha'));
                        this.update(storeItem.get('Escala'));
                    }
                },
                style: {
                    fill: '#38B8BF',
                    stroke: '#38B8BF',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 6,
                    radius: 6,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
                }
            }]
        });

var panel1 = Ext.create('widget.panel', {
    border:false,
    width: ancho,
    region:'east',
    title: 'GRAFICO',
    layout: 'fit',
//    tbar: [{
//        text: 'Save Chart',
//        handler: function(){ downloadChart(chart1); }
//    }],
    items: [grafica]
});

    if(Ext.getCmp('PnlIndicadorQR'+IdQR)){Ext.getCmp('PnlIndicadorQR'+IdQR).destroy();}

    var panelCont = Ext.create('Ext.panel.Panel', {
    id:'PnlIndicadorQR'+IdQR,
    defaults: {
            collapsible: true,
            split: true,
            animFloat: false,
            autoHide: false,
            useSplitTips: true
    },
    layout:'border',
    bodyBorder: false,
    border:false,
    items:[grid,panel1]
    });

    StoreIndicadorQR.loadPage(1);

    Ext.getCmp('PnlSubQR'+btn.IdQR).removeAll();
    Ext.getCmp('PnlSubQR'+btn.IdQR).add(panelCont);
}
});